<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云端博客·项目</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/article.min.css">
    <link rel="stylesheet" href="css/style.min.css">
</head>
<body>
    <section id="main">
        <section id="banner">
			<div class="container">
				<div id="slideBox" class="slideBox">
					<div class="hd">
						<ul>
							<li>1</li>
							<li>2</li>
							<li>3</li>
						</ul>
					</div>
					<div class="bd">
						<ul>
							<li><a href="#" target="_blank"><img src="imgs/p01.jpg" /></a></li>
							<li><a href="#" target="_blank"><img src="imgs/p02.jpg" /></a></li>
							<li><a href="#" target="_blank"><img src="imgs/p06.jpg" /></a></li>
						</ul>
					</div>

					<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
					<a class="prev" href="javascript:void(0)"></a>
					<a class="next" href="javascript:void(0)"></a>

				</div>
			</div>
		</section>
            <!-- 分类和文章列表 -->
    <div class="container" id="cateAndArt">
        <div class="row">
          <div class="col-md-3">
            <!-- 分类 -->
            <div id="categories">
              <div class="list-group">
                <span class="list-group-item active"><span class="badge">14</span>全部分类</span>
                <a href="javascript:;" class="list-group-item"><span class="badge">14</span>HTML/HTML5</a>
                <a href="javascript:;" class="list-group-item"><span class="badge">14</span>CSS/CSS3</a>
                <a href="javascript:;" class="list-group-item"><span class="badge">14</span>VUE2/VUE3</a>
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <!-- 文章列表 -->
            <div id="articles">
              <ul id="ull">
                <!-- 新闻标题布局时，日期放标题文本前做右浮动 -->
                <li><a><span class="pull-right">2022-07-13</span>web开发基本常用语言</a></li>
                <li><a><span class="pull-right">2022-07-13</span>web开发基本常用语言</a></li>
                <li><a><span class="pull-right">2022-07-13</span>web开发基本常用语言</a></li>
              </ul>
            </div>
          </div>
        </div>
    </section>
        <!-- jq脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Bootstrap脚本  -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- 瀑布流布局 -->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.min.js"></script> 
<script src="js/jquery.SuperSlide.2.1.js"></script>
 <!-- 模版填充脚本 -->
 <script src="js/jquery.tmpl.min.js"></script>
 <script id="cateTmpl" type="text/x-jquery-tmpl">
   <a href="javascript:;" class="list-group-item"><span class="badge">${count}</span>{{= name}}</a>
 </script>  
 <script id="nr" type="text/x-jquery-tmpl">
    <li><a><span class="pull-right">${createdTime}</span>${title}</a></li>
  </script>
<script type="text/javascript">                                 
    jQuery(".slideBox").slide({
        mainCell: ".bd ul",
        autoPlay: true
    });
</script>
<script>
    $(function(){
        // 加载页眉
     $.get('part/header.html',function(dom){
            $('#main').before(dom);
        })
         // 加载页脚
     $.get('part/footer.html',function(dom){
            $('#main').after(dom);
        })
         // 加载分类
      // $.ajax({
      //   url: 'http://47.92.6.176:58728/api/Category/GetAll',
      //   type: 'get',
      //   success: function(result,status,xhr) {
      //     var data = result.data;
      //     console.log(data)
      //     // 移除原有的项
      //     $('#categories').find('.list-group-item').not(':first').remove();
      //     // 利用tmpl遍历数据，生成html节点，添加到页面中
      //     $('#cateTmpl').tmpl(data).appendTo($('#categories .list-group'));
      //   }
      // })
          // 加载博客
      // $.ajax({
      //   url: 'http://47.92.6.176:58728/api/Blog/GetAll',
      //   type: 'get',
      //   success: function(result,status,xhr) {
      //     var data = result.data;
      //     // 移除原有的项
      //     $('#ull').find('li ').remove();
      //     // 利用tmpl遍历数据，生成html节点，添加到页面中
      //     $('#nr').tmpl(data).appendTo($('#ull '));
      //   }
      // })
      //加载分类
        // $.ajax({...})
        //加载文章列表
    $.ajax({
      url: 'http://47. 92.6.176: 58728/api/Blog/GetAll' ,
      type: 'get',
      success: function(result) {
      var data = result.data;
      $('#articles'). find('ul').find('li'). remove();
      $(' #artTempl'). tmpl(data) .appendTo($(' #articles').find('u1'));
      }
    })
    //点击分类的事件
    $('#categories').on('click','.list-group-item' , function() {
    var id = $(this).data('id');
    console.log(id);
  $.ajax({
      url:`http://47.92. 6.176:58728/api/Blog/GetAllByCategory`,
      type:'get',
      data: {
      category: id
      },
      success: function(result) {
      var data = result.data;
      $('#articles').find('ul'). find('li').remove();
      $('#artTempl'). tmpl(data). appendTo($('#articles'). find('ul'));
      }
  })
// loadArticles(id);
})

        //加载文章列表
      //   $.ajax({
      //     url:'http://47.92.6.176:58728/api/Blog/GetAll',
      //     type:'get',
      //     success: function(result) {
      //     var data = result.data;
      //     $('#articles'). find('ul').find('li'). remove();
      //     $('#artTempl').tmpl(data) . appendTo($(' #articles').find('ul'));
      //     }
      //   })
      //   //分类点击事件
      //   $('#categories').on('click', '.list -group-item',function() { 
      //   //获取分类中保存的分类id
      //   var id = $(this).data('id');
      //   // console.log(id);
      //   //传入分类id获取文章列表
      //   getArticles(id);
      //   })
      //   //通过分类加载文章列表
      //   function getArticles(categoryId) {
      //   $.ajax({
      //   url: 'http://47.92. 6.176:58728/api/Blog/GetAllByCategory',
      //   type:'get',
      //   data: {
      //   category: categoryId
      //   },
      //   success:function(result) {
      //     var data = result.data;
      //     $(' #articles').find('ul'). find('li').remove();
      //     $( ' #artTempl'). tmpl(data) . appendTo($(' #articles').find('ul'));
      //   }
      //   })
      // }
    })
</script>
</body>
</html>